<template>
	<div class="cont">
		<img class="logo" src="../assets/logo.jpg" alt="logo">
		<ul>
			<li @click="changeLinkStatus(0)"><router-link to="members" :class="{active:linkStatus[0]==1,idle:linkStatus[0]==0}" >Members</router-link></li>
			<li @click="changeLinkStatus(1)"><router-link to="emails" :class="{active:linkStatus[1]==1,idle:linkStatus[1]==0}" >Emails</router-link></li>
			<li>Charts</li>
			<li>Photos</li>
		</ul>
	</div>
</template>

<script>

export default{
	name:'sideMenu',
	data(){
		return {
			linkStatus:[0,0,0,0]
		}
	},
	methods:{
		changeLinkStatus:function(num){
			if(num>3 || num <0)return;
			this.linkStatus=[0,0,0,0];
			this.linkStatus[num]=1;
			console.log('num='+num+' linkStatus=',this.linkStatus)
		}
	}
}
</script>

<style scoped>
	.logo{
		width: 96px;
		height: 96px;
		display: block;
		margin:0 auto;
	}
	.cont{
		padding: 10px;
		background: #837e7c;
	}
	li{
		list-style-type: none;
		height: 24px;
	}
	a{text-decoration: none;}
	.active{color:yellow;}
	.idle{color:white;}
</style>